/* 验证：外部样式表是否关联成功 */
/* 1.背景效果 */
body{
    /* 背景属性【复合属性】：属性值url（） 
    实现效果：引入背景图【移动位置】
    */
    background: url(../img/lu.png) no-repeat;
    /* 背景尺寸属性：属性值：宽和高 */
    background-size: 100% 300px;
}
/* 2.猫 */
#cat{
    width: 300px;
    height: 300px;
    background: url(../img/maolaoshu.png);
    background-size: 100% 100%;
    /* 定位 */
    position: relative;
    left: 0px;
    top: -90px;
    /* 添加关键帧:关键帧名称 过渡时间 流畅度 无限次 */
    animation: cat 10s linear infinite;
}
@keyframes cat{
    0%{
        /* 起始帧 动画熊位置不能改变 */
        left: 0px;
        top: -90px;
    }
    25%{
        /* 向右 */
        background: url(../img/maolaoshu1.png);
        background-size: 100% 100%;
        left: 50px;
        top: -90px;
        transform: scale(1) rotate(0deg);
    }
    50%{
        background: url(../img/maolaoshu2.png);
        background-size: 100% 100%;
        left: 100px;
        top: -90px;
        transform: scale(1) rotate(0deg);
    }
    75%{
        background: url(../img/xuanfentui.png);
        background-size: 100% 100%;
        left: 150px;
        top: -90px;
        /* 缩放 */
        transform: scale(1) rotate(0deg);
    }
    100%{
        background: url(../img/zuizhong.png);
        background-size: 100% 100%;
        left: 200px;
        top: -90px;
        transform: scale(1) rotate(0deg);
    }
}